<!-- 查询通讯录 -->
<template>
	<view class="">
		<u-sticky bgColor="#fff" class="sticky" :customNavHeight="0">
			<view class="input" :style="'padding-top:'+inputTop+'px'">
				<u--input
					placeholder="请输入姓名/手机号"
					border="null"
					prefixIcon="search"
					prefixIconStyle="font-size: 44rpx;color: #C5C2C6"
					:customStyle="{background: '#FBF8FB'}"
					v-model="form.name"
					@blur="onConfirm"
					@clear="onConfirm"
					:focus="true"
				></u--input>
				
				<view class="btn" @click="onReturn">取消</view>
			</view>
		</u-sticky>
		
		<!-- 通訊錄 -->
		<view class="cell" :border="false" v-if="addressBook && addressBook.length">
			<u-cell-group >
				<u-cell  rightIconStyle="color:#C8C5C8"  :arrow="false" :center="true" @click="onPhone(item)" v-for="(item,index) in addressBook" :key="index">
					<view class="left-icon" slot="icon">
						<u-avatar :src="imageUrl(item.avatar)" shape="square" mode="aspectFill"></u-avatar>
					</view>
					<view slot="title">
						<!-- <view class="cell-title">{{item.realname}}</view> -->
						<span class="cell-title">{{item.realname}}</span>
						<span class="cell-value" style="margin-left: 10px;">
							{{item.phone}}
						</span>
					</view>
					<view slot="label" class="cell-describe">
						{{item.departName}}({{item.levelPostName}})
					</view>
					<!-- <view class="cell-value" slot="value">
						{{item.phone}}
					</view> -->
					<view class="cell-right-icon" slot="right-icon">
						<image src="@/static/addressBook/phone_icon.png" mode="aspectFill"></image>
					</view>
				</u-cell>
			</u-cell-group>
			<u-loadmore margin-top="20" style="padding-bottom: 40rpx;" v-if="addressBook && addressBook.length && isShow" :status="status" />
			
		</view>
		<u-empty
			v-if="!isShow"
			margin-top="140"
			mode="data"
			icon="/static/empty/data.png"
		>
		</u-empty>
		
		<!-- 弹出层 -->
		<u-action-sheet :actions="listAction" @select="clickAction" :show="showAction" ></u-action-sheet>
		<!-- 权限告知弹窗 -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	import {
		queryByOrgCodeForAddressList, // 通讯录
	} from '@/api/index.js'
	import {imageUrl} from '@/utils/common.js'
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	export default {
		components: {
			ykAuthpup
		},
		data() {
			return {
				imageUrl: imageUrl,
				
				showAction: false, // 弹出层控制开关
				phoneInfo: '', // 点击选择的电话号码
				listAction: [
					{
						name:'拨打电话',
						code: 'callPhone'
					},
					{
						name: '复制',
						code: 'copy'
					},
					{
						name: '存储到本地通讯录',
						code: 'storage'
						
					},
					{
						name: '取消',
						code: 'cancel'
					}
				],
				
				inputTop: 0,
				form:{
					name: ''
				},
				addressBook: [], // 通讯录
				page: {
					pageNo: 1,
					pageSize: 10,
				},
				isBottom: true,
				permissionID: '',
				code: '',
				isShow: true // 是否显示空白页
			}
		},
		onLoad() {
			var _this = this
			uni.getSystemInfo({
				success: (res)=>{
					uni.setStorageSync('getSystemInfo', res);
					_this.inputTop = res.safeArea.top
				}
			});
		},
		methods: {
			// 查询通讯录
			getAddressBook () {
				this.status = 'loading';
				var params = {
					column: 'createTime',
					order: 'desc',
					field: 'id,,realname,workNo,departName,post,postIds,phone',
					pageNo: this.page.pageNo,
					pageSize: 20,
					
				}
				var nameReg = /^[\u4E00-\u9FA5]{1,8}$/;
				if (this.form.name) {
					if(nameReg.test(this.form.name)) {
						params.realname =this.form.name
					} else {
						params.phone = this.form.name
					}
				} else {
					params.realname = ''
					params.phone = ''
				}
				
				queryByOrgCodeForAddressList(params).then(res => {
					if (res.success) {
						if (this.page.pageNo ==1 && (!res.result.records || !res.result.records.length)) this.isShow = false
						const _data = res.result.records || [];
						if (_data.length < this.page.pageSize) {
							this.status = 'nomore';
							this.isBottom = true;
						} else if (_data.length >= this.page.pageSize) {
							this.status = 'loadmore';
							this.isBottom = false;
						}
						this.addressBook =this.addressBook.concat(res.result.records)
					}
					
				}).catch(res => {
					
					//联网失败, 结束加载
					// this.mescroll.endErr();
				})
			},
			
			// 点击拨打电话
			onPhone (item) {
				this.showAction = true
				this.phoneInfo = item
			},
			
			openAuth(){
					this.$refs['authpup'].open() //调起自定义权限目的弹框,具体可看示例里面很详细
			},
			//用户授权权限后的回调
			changeAuth(){
				var _this = this
				if (this.code == 'callPhone') { // 拨打电话
					// #ifdef APP-PLUS
					uni.makePhoneCall({
						phoneNumber:_this.phoneInfo.phone,
						fail() {
							uni.showToast({
								title: '拨打电话失败',
								icon: 'none'
							})
						}
					})
					// #endif
					// #ifndef APP-PLUS
					uni.showToast({
						title: '暂无此功能',
						icon: 'none'
					})
					// #endif
				} else if (this.code == 'storage') { //存储到通讯录
				// #ifdef APP-PLUS
				uni.addPhoneContact({
					firstName: _this.phoneInfo.realname,
					mobilePhoneNumber: _this.phoneInfo.phone,
					success() {
						uni.showToast({
							title: '存储到通讯录成功',
							icon: 'none'
						})
					},
					fail (fail) {
						uni.showToast({
							title: '存储到通讯录失败',
							icon: 'none'
						})
					}
				});
				// #endif
				// #ifndef APP-PLUS
				uni.showToast({
					title: '暂无此功能',
					icon: 'none'
				})
				// #endif
				}
			},
			
			// 点击弹窗选择
			clickAction (item) {
				let _this = this
				this.code = item.code
				if (item.code == 'callPhone') { // 拨打电话
					// #ifdef APP-PLUS
					this.permissionID='CALL_PHONE'
					this.$nextTick(() => {
						_this.openAuth()
					})
					// #endif
					// #ifndef APP-PLUS
					uni.showToast({
						title: '暂无此功能',
						icon: 'none'
					})
					// #endif
				} else if (item.code == 'copy') { // 复制
					uni.setClipboardData({
					  data: _this.phoneInfo.phone,
						showToast: false,
					  success: function() {
							uni.showToast({
								title:'复制成功',
								icon: 'none'
							})
					  }
					})
				} else if (item.code == 'storage') { //存储到通讯录
				// #ifdef APP-PLUS
				this.permissionID='READ_CONTACTS'
				this.$nextTick(() => {
					_this.openAuth()
				})
				// #endif
				// #ifndef APP-PLUS
				uni.showToast({
					title: '暂无此功能',
					icon: 'none'
				})
				// #endif
				}
				this.showAction = false
			},
			
			onReturn () {
				uni.navigateBack();
			},
			
			onConfirm () {
				this.isShow = true
				this.status = 'loadmore';
				this.page = {
					pageNo: 1,
					pageSize: 10,
				}
				this.addressBook = []
				this.getAddressBook()
			},
			
			
		},
		onReachBottom() {
			if (this.isBottom) return;
			this.page.pageNo++
			this.getAddressBook()
			
		}
	}
</script>

<style lang="scss" scoped>
.sticky{
	padding: 20rpx;
}
.input{
	display: flex;
	align-items: center;
	.btn{
		// width: 100rpx;
		padding-left: 20rpx;
		color: #1E6FFF;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
}

.cell{
	margin-top: 10px;
	background-color: #ffffff;
	box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.05);
	.left-icon{
		width: 40px;
		height: 40px;
		margin-right: 20rpx;
		image{
			width: 40px;
			height: 40px;
			border-radius: 10rpx;
		}
	}
	.cell-title{
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		// width: 320rpx;
		color: #171717;
		overflow: hidden; /*超出隐藏*/
		text-overflow: ellipsis;/*隐藏后添加省略号*/
		white-space: nowrap;/*强制不换行*/
	}
	.cell-describe{
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F7F7F;
		width: 100%;
		// overflow: hidden; /*超出隐藏*/
		// text-overflow: ellipsis;/*隐藏后添加省略号*/
		// white-space: nowrap;/*强制不换行*/
	}
	.cell-value{
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F7F7F;
	}
	.cell-right-icon{
		width: 20px;
		height: 20px;
		image{
			width: 20px;
			height: 20px;
		}
	}
	.cell-title-text{
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #171717;
	}
	.cell-num{
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B2B2B2;
	}
}
</style>
